<template>
  <div class="message-wall">
    <!-- 标题 -->
    <h1 class="wall-title">✨ 留言板 ✨</h1>

    <!-- 留言表单 -->
    <div class="message-form">
      <el-card class="form-card">
        <el-form 
          ref="formRef" 
          :model="formData" 
          :rules="formRules" 
          label-position="top"
        >
          <el-form-item label="昵称" prop="nickname">
            <el-input 
              v-model="formData.nickname" 
              placeholder="请输入你的昵称"
              prefix-icon="el-icon-user"
            />
          </el-form-item>
          <el-form-item label="留言内容" prop="content">
            <el-input 
              v-model="formData.content" 
              type="textarea" 
              :rows="4" 
              placeholder="说点什么吧~"
              prefix-icon="el-icon-chat-dot-round"
            />
          </el-form-item>
          <el-form-item>
            <el-button 
              type="primary" 
              :loading="isSubmitting" 
              @click="submitMessage"
              class="submit-btn"
            >
              发送留言
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 留言列表 -->
    <div class="message-list">
      <transition-group name="fade-slide">
        <el-card 
          v-for="msg in messages" 
          :key="msg.id" 
          class="message-card"
        >
          <div class="message-header">
            <div class="avatar">
              <el-avatar :size="40" :src="msg.avatar">{{ msg.nickname[0] }}</el-avatar>
            </div>
            <div class="meta">
              <span class="nickname">{{ msg.nickname }}</span>
              <span class="time">{{ formatTime(msg.time) }}</span>
            </div>
          </div>
          <div class="message-content">{{ msg.content }}</div>
        </el-card>
      </transition-group>
      <div v-if="messages.length === 0" class="empty-tip">
        暂无留言，快来成为第一个留言的人吧~ 😊
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageWall',
  data() {
    return {
      // 表单数据
      formData: {
        nickname: '',
        content: ''
      },
      // 表单校验规则
      formRules: {
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入留言内容', trigger: 'blur' }]
      },
      // 留言列表
      messages: [],
      // 提交状态
      isSubmitting: false
    };
  },
  created() {
    // 初始化：从 localStorage 加载留言（Vue 2 中使用 created 钩子）
    this.loadMessages();
  },
  methods: {
    // 加载本地存储的留言
    loadMessages() {
      const savedMessages = localStorage.getItem('messageWall');
      if (savedMessages) {
        this.messages = JSON.parse(savedMessages);
      }
    },

    // 提交留言
    submitMessage() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return;

        this.isSubmitting = true;
        setTimeout(() => { // 模拟异步请求（实际项目中替换为 API 调用）
          // 生成唯一 ID 和随机头像
          const newMessage = {
            id: Date.now().toString(),
            nickname: this.formData.nickname.trim(),
            content: this.formData.content.trim(),
            time: Date.now(),
            avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${this.formData.nickname}`
          };

          // 添加到列表（最新留言在最前面）
          this.messages.unshift(newMessage);

          // 保存到 localStorage
          localStorage.setItem('messageWall', JSON.stringify(this.messages));

          // 清空表单
          this.formData.nickname = '';
          this.formData.content = '';

          this.$message.success('留言成功！');
        }, 500); // 模拟网络延迟
        this.isSubmitting = false;
      });
    },

    // 格式化时间（如：2024-03-10 14:30）
    formatTime(timestamp) {
      return dayjs(timestamp).format('YYYY-MM-DD HH:mm');
    }
  }
};
</script>

<style lang="scss" scoped>
.message-wall {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  .wall-title {
    text-align: center;
    color: #409eff;
    font-size: 2.5rem;
    margin: 20px 0 40px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .message-form {
    margin-bottom: 40px;
    .form-card {
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .submit-btn {
      width: 100%;
      padding: 12px 24px;
      font-size: 16px;
      background: linear-gradient(45deg, #409eff, #67c23a);
      border: none;
    }
  }

  .message-list {
    .message-card {
      border-radius: 15px;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      :deep(.el-card__body) {
        padding: 20px;
      }
    }

    // 淡入滑动动画
    .fade-slide-enter-active {
      transition: all 0.5s ease;
    }
    .fade-slide-enter-from {
      opacity: 0;
      transform: translateY(20px);
    }

    .message-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .avatar {
        margin-right: 15px;
      }
      .meta {
        display: flex;
        flex-direction: column;
        .nickname {
          font-weight: bold;
          color: #303133;
          font-size: 16px;
        }
        .time {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
    .message-content {
      color: #606266;
      line-height: 1.6;
      font-size: 15px;
      white-space: pre-wrap;
    }
  }

  .empty-tip {
    text-align: center;
    color: #909399;
    padding: 40px 0;
    font-size: 16px;
    background: rgba(255,255,255,0.8);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
}
</style>